<template>
	<view class="Thome flex-col">
		<view class="Thome-top">
			<image class="bg" src="/static/images/jishi/home-bg.png"></image>
			<view class="user-box">
				<uv-image :src="infoData.avatarPath" width="72px" height="72px" shape="circle"></uv-image>
				<view class="user-name">{{infoData.nickName}}</view>
			</view>
			<view class="statistics flex-y-center">
				<view class="statistics-item">
					<text class="num">{{topInfo[1]||0}}</text>
					<text>当日单量</text>
				</view>
				<view class="statistics-item">
					<text class="num">{{topInfo[2]||0}}</text>
					<text>平均分数</text>
				</view>
				<view class="statistics-item">
					<text class="num">{{topInfo[0]||0}}</text>
					<text>回头率</text>
				</view>
			</view>
		</view>
		<view class="order-list">
			<view class="TechnicianServiceItem" v-for="item in orderList">
				<view class="item-img flex-grow-0" @click="gotoDetails(item)">
					<!-- <image :src="/static/images/pic1.png" mode="aspectFill"></image> -->
					<uv-image :src="item.servicePath" width="91px" height="91px"></uv-image>
				</view>
				<view class="item-cont flex-grow-1" @click="gotoDetails(item)">
					<view class="name font32">{{item.appUserName}}</view>
					<view class="good-name">
						服务项目:{{item.serviceName}}
					</view>
					<view class="time">
						预约时间：{{item.serveDate}}
					</view>
					<view class="price">
						￥{{item.orderPrice}}
					</view>
				</view>
				<view class="btn" @click="Scanthecode(item.orderId)">扫码核销</view>
				<view class="btn" @click="modifyOrder(item.orderId,2)">确认服务</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData: {},
				userList: [], //我的客户列表
				topInfo: [],
				orderList: []
			};
		},
		onLoad() {

		},
		mounted() {
			this.infoData = this.$store.state.userInfo.user
			this.getnewDateOrderNum()
			this.getnewDateOrderList()

		},
		methods: {
			// 扫码核销
			Scanthecode(orderId) {
				uni.scanCode({
					onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择
					scanType: ['qrCode', 'barCode'], // 扫码类型，可以指定二维码、条形码等
					success: (res) => {
						console.log('扫码结果:', res.result);
						this.submitverificationCode(orderId, res.result)
					},
					fail: (err) => {
						console.error('扫码失败:', err);
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				});
			},
			//核销订单
			async submitverificationCode(orderId, verificationCode) {
				let res = await this.muajax.verificationCode({
					verificationCode,
					orderId
				});
				if (res.code == 200) {
					this.getnewDateOrderList()
				}
			},

			async getnewDateOrderNum() {
				const {
					code,
					data
				} = await this.muajax.newDateOrderNum({}, {
					urlRewrite: url => `${url}/${this.infoData.userId}`
				})
				for (let key in data) {
					if (data.hasOwnProperty(key)) {
						console.log(key, data[key]);
						this.topInfo.push(data[key])
					}
				}
			},
			async getnewDateOrderList() {
				const {
					code,
					data
				} = await this.muajax.newDateOrderList({}, {
					urlRewrite: url => `${url}/${this.infoData.userId}`
				})
				this.orderList = data
			},
			// 跳转详情
			gotoDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/order/orderDetails?orderId=${item.orderId}`
				})
			},

			async modifyOrder(item, num) {
				console.log(1)
				let title = null
				if (num == 2) {
					title = '是否开始服务？'
				} else if (num == 3) {
					title = '是否结束服务？'
				} else {
					title = '是否取消预约？'
				}
				uni.showModal({
					title: '提示',
					content: title,
					success: res => {
						if (res.confirm) {
							this.muajax.modifyOrder({
								orderId: item,
								status: num,
							}).then(data => {
								if (data.code = 200) {
									this.getnewDateOrderList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

				console.log(data)
			},

		},
	}
</script>

<style lang="less" scoped>
	.Thome {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}

	.order-list {
		padding: 30rpx;
		box-sizing: border-box;
		overflow-y: scroll;
		margin-top: 100rpx;
		padding-bottom: 200rpx;
	}

	.TechnicianServiceItem {
		width: 100%;
		// height: 210rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		padding: 15rpx;
		box-sizing: border-box;
		position: relative;
		align-items: center;

		.item-img {
			width: 182rpx;
			height: 182rpx;
			background-color: #f6f6f6;
			border-radius: 10rpx;
			background: #f1f1f1;
			margin-right: 23rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		.name {
			color: #333;
			font-weight: bold;
		}

		.btn {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			padding: 0px 14rpx;
			height: 50rpx;
			background-color: #60bcbb;
			border-radius: 25rpx;
			text-align: center;
			line-height: 48rpx;
			color: #fff;
		}

		.good-name,
		.time {
			color: #666;
		}

		.price {
			color: #ff0000;
			margin-top: 10rpx;
		}

	}

	.user-box {
		// width: 144rpx;
		// height: 144rpx;
		margin: 0px auto;
		padding-top: 50rpx;
		position: relative;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// border-radius: 50%;
		// background: #f1f1f1;

		image {
			width: 100%;
			height: 100%;
		}

		.user-name {
			text-align: center;
			color: #ffffff;
			font-size: 40rpx;
			margin-top: 20rpx;
			margin-bottom: 46rpx;
		}
	}

	.Thome-top {
		height: 447rpx;
		width: 100%;
		position: relative;

		.bg {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;

		}

		.statistics {
			position: relative;
			width: 620rpx;
			height: 151rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(75, 147, 242, 0.3);
			border-radius: 8rpx;
			margin: 0px auto;
			margin-top: 46rpx;

			.statistics-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.33%;
				color: #333333;

				.num {
					font-size: 42rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #12c8c6;
					margin-bottom: 20rpx;
				}
			}

		}

	}
</style>